<template>
  <div>
    <el-row justify="space-around">
      <el-col :span="12">
        <dv-border-box8 class="scale-top-left__item-box-2">
          <el-row align="middle">
            <el-col :span="6">
              <span class="scale-top-left__label">带速：</span>
            </el-col>
            <el-col :span="18">
              <dv-digital-flop class="scale-top-left__content" :config="speed" />
            </el-col>
          </el-row>
        </dv-border-box8>
      </el-col>
      <el-col :span="12">
        <dv-border-box8 :reverse="true" class="scale-top-left__item-box-2">
          <el-row justify="space-between" align="middle">
            <el-col :span="6" >
              <span class="scale-top-left__label">密度：</span>
            </el-col>
            <el-col :span="18">
              <dv-digital-flop class="scale-top-left__content" :config="density" />
            </el-col>
            <el-col :span="4">
              <span class="scale-top-left__label" style="font-size: 8px">吨/立方米</span>
            </el-col>
            <el-col :span="4">
              <el-button type="warning" round @click="submit">修改</el-button>
            </el-col>
          </el-row>
        </dv-border-box8>
      </el-col>
    </el-row>
    <el-row justify="space-around">
      <el-col :span="8">
        <dv-border-box8 class="scale-top-left__item-box-3">
          <el-row align="middle">
            <el-col :span="6">
              <span class="scale-top-left__label">早：</span>
            </el-col>
            <el-col :span="18" style="height: 130px">
              <dv-digital-flop class="scale-top-left__content" :config="morning" />
            </el-col>
          </el-row>
        </dv-border-box8>
      </el-col>
      <el-col :span="8">
        <dv-border-box8 :reverse="true" class="scale-top-left__item-box-3">
          <el-row align="middle">
            <el-col :span="6">
              <span class="scale-top-left__label">中：</span>
            </el-col>
            <el-col :span="18" style="height: 130px">
              <dv-digital-flop class="scale-top-left__content" :config="middle" />
            </el-col>
          </el-row>
        </dv-border-box8>
      </el-col>
      <el-col :span="8">
        <dv-border-box8 class="scale-top-left__item-box-3">
          <el-row align="middle">
            <el-col :span="6">
              <span class="scale-top-left__label">晚：</span>
            </el-col>
            <el-col :span="18" style="height: 130px">
              <dv-digital-flop class="scale-top-left__content" :config="evening" />
            </el-col>
          </el-row>
        </dv-border-box8>
      </el-col>
    </el-row>
    <el-row justify="space-around">
      <el-col :span="8">
        <dv-border-box8 class="scale-top-left__item-box-3">
          <el-row align="middle">
            <el-col :span="6">
              <span class="scale-top-left__label">日：</span>
            </el-col>
            <el-col :span="18" style="height: 130px">
              <dv-digital-flop class="scale-top-left__content" :config="day" />
            </el-col>
          </el-row>
        </dv-border-box8>
      </el-col>
      <el-col :span="8">
        <dv-border-box8 :reverse="true" class="scale-top-left__item-box-3">
          <el-row align="middle">
            <el-col :span="6">
              <span class="scale-top-left__label">月：</span>
            </el-col>
            <el-col :span="18" style="height: 130px">
              <dv-digital-flop class="scale-top-left__content" :config="month" />
            </el-col>
          </el-row>
        </dv-border-box8>
      </el-col>
      <el-col :span="8">
        <dv-border-box8 class="scale-top-left__item-box-3">
          <el-row align="middle">
            <el-col :span="6">
              <span class="scale-top-left__label">年：</span>
            </el-col>
            <el-col :span="18" style="height: 130px">
              <dv-digital-flop class="scale-top-left__content" :config="year" />
            </el-col>
          </el-row>
        </dv-border-box8>
      </el-col>
    </el-row>
  </div>

</template>

<script setup lang="ts">
import { GET_RESTFUL, PUT } from "@/api";
import { getDay } from "@/utils";
import useSettingStore from "@/stores/setting";

const props = defineProps({
  deviceId: {
    type: String,
    default: '',
    required: true
  }
})

const scale = ref({})
let timer:number

onMounted(()=>{
  fetchData()
  swiper()
})

onBeforeUnmount(()=>{
  clearData()
})

watch(
    () => props.deviceId,
    (val: any) => {
      fetchData()
    }
)
watchEffect(()=>{
  if (useSettingStore().flushDevice){
    fetchData()
    useSettingStore().setFlushDevice(false)
  }
})

const speed = computed(()=>{
 let speed = 0
  if (scale.value.speed){
    speed = Number(scale.value.speed)
  }
  return {
    number: [Number(speed)],
    content: '{nt}米/秒',
    toFixed: 2
  }
})

const density = computed(()=>{
  let density = 0
  if (scale.value.density){
    density = Number(scale.value.density)
  }
  return {
    number: [Number(density)],
    content: '{nt}吨/立方米',
    toFixed: 2
  }
})


const morning = computed(()=>{
  let currentMorningFlow = 0
  if (scale.value.currentMorningFlow){
    currentMorningFlow = Number(scale.value.currentMorningFlow)
  }
  return {
    number: [Number(currentMorningFlow)],
    content: '{nt}吨',
    toFixed: 2
  }
})

const middle = computed(()=>{
  let currentNoonFlow = 0
  if (scale.value.currentNoonFlow){
    currentNoonFlow = Number(scale.value.currentNoonFlow)
  }
  return {
    number: [Number(currentNoonFlow)],
    content: '{nt}吨',
    toFixed: 2
  }
})

const evening = computed(()=>{
  let currentNightFlow = 0
  if (scale.value.currentNightFlow){
    currentNightFlow = Number(scale.value.currentNightFlow)
  }
  return {
    number: [Number(currentNightFlow)],
    content: '{nt}吨',
    toFixed: 2
  }
})

const day = computed(()=>{
  let currentDayFlow = 0
  if (scale.value.currentDayFlow){
    currentDayFlow = Number(scale.value.currentDayFlow)
  }
  return {
    number: [Number(currentDayFlow)],
    content: '{nt}吨',
    toFixed: 2
  }
})

const month = computed(()=>{
  let currentMonthFlow = 0
  if (scale.value.currentMonthFlow){
    currentMonthFlow = Number(scale.value.currentMonthFlow)
  }
  return {
    number: [Number(currentMonthFlow)],
    content: '{nt}吨',
    toFixed: 2
  }
})

const year = computed(()=>{
  let currentYearFlow = 0
  if (scale.value.currentYearFlow){
    currentYearFlow = Number(scale.value.currentYearFlow)
  }
  return {
    number: [Number(currentYearFlow)],
    content: '{nt}吨',
    toFixed: 2
  }
})

function getScale(){
  GET_RESTFUL('getDeviceInfo',props.deviceId).then(resp=>{
    if (resp.data){
      scale.value ['speed'] = resp.data.speed || 0.00
      scale.value ['density'] = resp.data.density || 0.00
    }
  })
}
function getContrastData(){
  let date = getDay(-1,'-');
  GET_RESTFUL("contrast",date + "/" +props.deviceId).then((resp) => {
    if (resp.data){
      scale.value = {
        ...scale.value,
        ...resp.data
      }
    }
  })
}

function submit(){
  PUT("configDensity",{'id': props.deviceId,'density': scale.value.density}).then(resp =>{
    Window.$message({
        message: '修改成功',
        type: "success",
      })
   getScale();
  })
}

function fetchData(){
  getScale();
  getContrastData();
}

function swiper(){
  if (timer) {
    return
  }
  let looper = () => {
    fetchData()
  }
  timer = setInterval(looper, useSettingStore().echartsAutoTime);
}

function clearData(){
  if (timer) {
    clearInterval(timer)
    timer = null!
  }
}
</script>

<style scoped lang="scss">
.scale-top-left__item-box-2{
  width: 410px;
  height: 135px;
}

.scale-top-left__item-box-3{
  width: 274px;
  height: 135px;
}

.scale-top-left__label{
  color: #e6a23c;
  font-size: 20px;
}

.scale-top-left__content{
  height: 100%;
  width: 100%;
}

:deep(.el-input__wrapper){
  background-color: transparent;
  // 如果没有下面这一行样式的话 无法对border进行自定义修改
  box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  border: none;
}

:deep(.el-input__inner) {
  background-color: transparent;
  border-color: transparent;
  outline: none;
  color: #3de7c9;
  font-size: 20px;
  text-align: center;
}
</style>